import React from "react";
import { Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Fontisto from 'react-native-vector-icons/Fontisto';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Shop from "../pages/Shop";
import SearchPage from '../pages/SearchPage';
import ShoppingBag from "../pages/ShoppingBag";


function PersonalCenter() {
  return <Text>PersonalCenter</Text>;
}
function Collection() {
  return <Text>Collection</Text>;
}

//底部导航器
const Tab = createBottomTabNavigator();
function MainScreen() {
  return (
    <Tab.Navigator
      initialRouteName="ShoppingBag"
      activeColor="#000000"
      inactiveColor="#8E8E93">
      <Tab.Screen name="Shop" component={Shop}
        options={{
          tabBarLabel: '商店',
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Fontisto name="shopify" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen name="SearchPage" component={SearchPage}
        options={{
          tabBarLabel: '搜索',
          title:"搜索",
          headerTitleAlign: 'center',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="search" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen name="ShoppingBag" component={ShoppingBag}
        options={{
          tabBarLabel: '购物袋',
          title:"购物袋",
          headerTitleAlign: 'center',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome5 name="shopping-bag" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen name="Collection" component={Collection}
        options={{
          tabBarLabel: '收藏',
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="collections" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen name="PersonalCenter" component={PersonalCenter}
        options={{
          tabBarLabel: '个人中心',
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="user" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default MainScreen;